<template>

  <el-dialog :title="title" :visible="dialogFormVisible"  :close-on-click-modal="false" @close="dialogFormVisible=false">
    {{emp}}
    <el-form :model="emp" :rules="rules" ref="ruleForm">
      <el-form-item label="员工姓名" :label-width="formLabelWidth" align="left" prop="ename">
        <el-input v-model="emp.ename" autocomplete="off" style="width:85%" ></el-input>
      </el-form-item>
      <el-form-item label="员工性别" :label-width="formLabelWidth" align="left" prop="sex">
        <el-radio v-model="emp.sex" label="男">男</el-radio>
        <el-radio v-model="emp.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="员工住址" :label-width="formLabelWidth" align="left" prop="city">
        <el-input v-model="emp.city" autocomplete="off"  style="width:85%" ></el-input>
      </el-form-item>
      <el-form-item label="所在部门" align="left" :label-width="formLabelWidth" prop="did">
        <el-select v-model="emp.did" placeholder="所在部门"  style="width:85%" >
          <el-option :label="d.dname" :value="d.did" v-for="d in depts"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {findDepts} from "@/api/dept";
import {add, update} from "@/api/emp";

export default {
  name: "Student_Add_Or_Update",
  data(){
    return {
      dialogFormVisible:false,    // 控制对话框的显示与隐藏
      formLabelWidth:'100px',     // 对话框标签宽度
      emp:{},                 // 代表当前操作的员工
      title:'标题',            // 对话框的标题
      depts:[],                 // 所有班级列表
      // 下面定义验证规则
      rules:{
        ename:[
          {required:true,message:'请输入姓名！',trigger:blur},
        ],
        sex:[
          {required:true,message:'请选择性别！',trigger:blur},
        ],
        city:[
          {required:true,message:'请输入住址！',trigger:blur},
        ],
        did:[
          {required:true,message:'请选择部门！',trigger:blur},
        ],
       }
    }
  },
  created() {
    //1. 查询所有的班级
    this.findDepts();
  },
  methods:{
    //1.组件初始化方法(供外界父组件调用)
    init(row) {
      //1.1 显示当前的对话框
      this.dialogFormVisible = true;
      //1.2 如果row有值，代表是修改操作
      if (row) {
        this.title = "修改员工信息";
        this.emp = row;
      }else{
        this.title = "添加新的员工"
        this.emp = {}
      }

    },
    //2. 查询所有的班级列表
    findDepts(){
      findDepts().then(({data}) => {
        this.depts = data.data;
      })
    },
    //提交表单
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //关闭对话框
          this.dialogFormVisible = false
          //根据是否有员工id，判断是添加还是修改
          if(this.emp.eid){
            this.update(this.emp);
          }else{
            this.add(this.emp);
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //添加员工到数据库中
    add(emp){
      add(emp).then((data)=>{
        let _this = this;
        if(data.success){
          this.$message({
            message: data.message,
            type: 'success',
            onClose(){       // 关闭消息框时，刷新页面
              _this.dialogFormVisible = false
              //刷新页面，触发父组件事件
              _this.$emit("reflushEmp");
            }
          });
        }
      })
    },

    //数据库中修改员工
    update(emp){
      update(emp).then((data)=>{
        console.log(data)
        let _this = this;
        if(data.code == 20000){
          this.$message({
            message: data.message,
            type: 'success',
            onClose(){       // 关闭消息框时，刷新页面
              //隐藏对话框
              _this.dialogFormVisible = false
              //刷新页面
              _this.$emit("reflushEmp");
            }
          });
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
